import React from "react";
import './personal.scss'
import {Menu} from "antd";
import MenuItem from "antd/es/menu/MenuItem";
import {BrowserRouter, Switch} from "react-router-dom";
import {renderRoutes} from "react-router-config";


function Personal(props){
    const menuClick = (e) => {
        window.location.href = '../personal/' + e.key + "?personal_menu=" + e.key + "&menu=personal"
    }

    const route = props.route

    const getQueryVariable = (variable) => {
        const query = window.location.search.substring(1);
        const vars = query.split("&");
        for (let i=0; i<vars.length; i++) {
            const pair = vars[i].split("=");
            if(pair[0] === variable){return pair[1];}
        }
        return 'info';
    }

    return(
        <div className={'personal-container'}>
            <div className={'personal-menu'}>
                <Menu
                    onClick={menuClick}
                    style={{ width: 220 }}
                    defaultSelectedKeys={[getQueryVariable("personal_menu")]}
                    defaultOpenKeys={['info']}
                    mode="inline">

                    <MenuItem eventKey={'info'}>
                        单位信息
                    </MenuItem>

                    <MenuItem eventKey={'change_password'}>
                        修改密码
                    </MenuItem>

                    <MenuItem eventKey={'notice'}>
                        消息通知
                    </MenuItem>
                </Menu>
            </div>

            <div className={'personal-content'}>
                <BrowserRouter>
                    <Switch>
                        {renderRoutes(route.children)}
                    </Switch>
                </BrowserRouter>
            </div>
        </div>
    )
}

export default Personal